<template>
  <div>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 1000px;height:500px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import _ from 'lodash'
export default {
  name: 'reports',
  data() {
    return {}
  },
  async mounted() {
    // 发起请求获取数据
    const { data } = await this.$http.get('reports/type/1')

    var chartDom = document.getElementById('main')
    var myChart = echarts.init(chartDom)

    let options = {
      title: {
        text: '用户来源',
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#E9EEF3',
          },
        },
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: [
        {
          boundaryGap: false,
        },
      ],
      yAxis: [
        {
          type: 'value',
        },
      ],
    }

    let res = _.merge(data.data, options)
    myChart.setOption(res)
  },
}
</script>